<template>
  <div ref="target">
    <div v-for="item in goods" :key="item.id">
      <div class="tou">
        <h2>{{ item.name }}</h2>
        <div class="sa">

            <a class="headersli"  v-for="obj in item.children" :key="obj.id" href="">{{ obj.name }}</a>
            <a class="headersli"  href="#">查看更多</a>

        </div>
      </div>
      <div class="boxs">

          <a class="lefts" href=""> <img v-lazyload="item.picture" alt="" /></a>

        <div class="regs">
          <ul>
            <a v-for="objs in item.goods" :key="objs.id">
              <div><img v-lazyload="objs.picture" alt="" /></div>
              <div>
                <p>{{ objs.name }}</p>
                <p class="p">{{ objs.desc }}</p>
                <p>¥{{ objs.price }}</p>
              </div>
              <div class="xiaceng">
                  <p>找相似</p>
                  <a href="">发现更多宝贝 ></a>

              </div>
            </a>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useLazyData } from './index'

import { findGoods } from '@/api/home'
export default {
  name: 'HomeGoods',
  setup () {
    const { target, result: goods } = useLazyData(findGoods)
    console.log(goods)
    return { goods, target }
  }
}
</script>

<style lang="less">
.sa {
padding-top: 10px;
    .headersli{
        transition: all .5s;
        display: inline-block;
         margin-left: 10px;
        width: 100px;
        height: 26px;
line-height: 26px;

        border-radius: 10px;
        text-align: center;
        &:hover{
            color:cornsilk;
 background-color: #5ab79c

        }

  }
}
.tou {
  width: 1240px;
  margin-left: 270px;
  display: flex;
  justify-content: space-between;
}
.boxs {
  margin-bottom: 20px;
  width: 1240px;
  height: 605px;
  background-color: rgb(255, 255, 255);
  margin-left: 265px;
  display: flex;
  .lefts {
    height: 605px;
    width: 240px;
    overflow: hidden;

    background-color: rgb(20, 167, 135);
    img {
      width: 100%;
      height: 100%;
    }
  }
  .regs {
    margin-left: 20px;
    width: 1240 - 270px;
    background-color: rgb(255, 255, 255);
    ul {
        display: flex;
        flex-wrap: wrap;
      width: 1240 - 240px;

      a {
        transition: all .5s;
        border: 1px solid rgb(255, 255, 255);
        margin-left: 7px;
        margin-bottom: 3px;
        width: 240px;
        height: 287px;
        list-style: none;
        overflow: hidden;

        padding: 10px 0px;
        &:hover {
          border: 1px solid rgb(10, 226, 190);
          .xiaceng{
              transition: all .5s;
            transform: translateY(-140px);
          }
        }
.xiaceng{
    color: rgb(255, 255, 255);
     transition: all .5s;
     width: 240px;
transform: translateY(00px);
     text-align: center;
    height: 90px;
     background-color: #5ab79c;
     margin: 0 auto;
     p{
       color: rgb(255, 255, 255);
     width: 100px;
     margin-left: 70px;
         border-bottom: 1px solid rgb(255, 255, 255);
         line-height: 35px;
     }
     a{
           color: rgb(255, 255, 255);
           border:0 solid #000;
     }

}
        div {
          margin: 0 auto;
          width: 160px;
          height: 160px;
          p {
              height: 38px;
            margin: 10px 0;
          }
          p:last-child {
            color: red;
            font-size: 16px;
          }
          .p {
            color: rgb(112, 106, 106);
            overflow: hidden;
            text-overflow: ellipsis;
            height: 15px;
            white-space: nowrap;
          }
          img {
            margin: 0 auto;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
